<template>
    <div class="content-wrapp">
        <el-form :model="searchInfo" method="post" enctype="multipart/form-data" label-width="80px">
            <el-form-item :label="$t('m.label.BU')">
                <BU
                    :form="searchInfo"
                    formId="businessUnitId"
                    addSize="mini"
                    @selectAll="getCategory"
                    size="small"
                ></BU>
            </el-form-item>
            <el-form-item :label="$t('m.label.operationalGroup')">
                <el-select
                    :placeholder="$t('m.placeholder.selectOperationalGroup')"
                    filterable
                    clearable
                    size="small"
                    v-model="searchInfo.operationGroup"
                    @change="chooseDept"
                    :disabled="disabled"
                >
                    <el-option
                        v-for="operationGroup in operationGroupList"
                        :key="operationGroup.id"
                        :value="operationGroup.id"
                        :label="operationGroup.departmentName"
                    ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item :label="$t('m.label.principal')">
                <el-select
                    :placeholder="$t('m.placeholder.selectPrincipal')"
                    size="small"
                    filterable
                    clearable
                    v-model="searchInfo.userChargeName"
                >
                    <el-option
                        v-for="user in userList"
                        :key="user.userId"
                        :value="user.userId"
                        :label="user.userName"
                    ></el-option>
                </el-select>
            </el-form-item>
            <div class="bin"></div>
            <el-form-item :label="$t('m.label.productCategory')">
                <category
                    ref="category"
                    :form="searchInfo"
                    formId="productCategory"
                    formBU="businessUnitId"
                    @selectAll="getProduct"
                    @selectDel="getProduct"
                    addSize="mini"
                    size="small"
                ></category>
            </el-form-item>
            <el-form-item :label="$t('m.label.productModelNumber')">
                <product
                    ref="product"
                    formId="productModelNumber"
                    formBU="businessUnitId"
                    formCategory="productCategory"
                    :form="searchInfo"
                    @selectAll="getASIN"
                    @selectDel="getASIN"
                    addSize="mini"
                    size="small"
                ></product>
            </el-form-item>
            <el-form-item :label="$t('m.label.ASIN')">
                <ASIN
                    ref="ASIN"
                    formId="asinId"
                    formBU="businessUnitId"
                    formCategory="productCategory"
                    formProduct="productModelNumber"
                    :form="searchInfo"
                    @selectAll="getReverse"
                    @selectDel="getReverse"
                    addSize="mini"
                    size="small"
                ></ASIN>
            </el-form-item>
            <el-form-item label-width="15px">
                <el-button
                    @click="search"
                    size="small"
                    type="primary"
                    icon="el-icon-search"
                >{{$t('m.button.search')}}</el-button>
                <el-button
                    @click="clearSearchInfo"
                    size="small"
                    icon="el-icon-circle-close"
                >{{$t('m.button.reset')}}</el-button>
                <download
                    ref="download"
                    :allColumns="columns"
                    @getDataxlsx="getDataxlsx"
                    size="small"
                    :title="$t('m.excel.productSubscription')"
                ></download>
            </el-form-item>
        </el-form>
        <div style="overflow: auto;">
            <pagination
                :length="total"
                :pagination="pagination"
                @currpage="requerstSearch"
                float="right"
            ></pagination>
        </div>
        <el-table
            ref="table"
            name="showTable"
            border
            style="width: 100%"
            v-loading="loading"
            :header-cell-style="getRowClass"
            :data="userChargeList"
        >
            <el-table-column prop="businessUnit" :label="$t('m.label.BU')"></el-table-column>
            <el-table-column prop="productCategory" :label="$t('m.label.productCategory')"></el-table-column>
            <el-table-column prop="countryName" :label="$t('m.label.country')">
                <template slot="header" slot-scope="scope">
                    <el-select
                        :placeholder="$t('m.placeholder.selectCountry')"
                        multiple
                        collapse-tags
                        v-model="tableHeadCountry"
                        @change="requerstSearch"
                        size="mini"
                    >
                        <el-option
                            v-for="country in countryList"
                            :key="country.countryId"
                            :value="country.countryId"
                            :label="country.countryName"
                        ></el-option>
                    </el-select>
                </template>
            </el-table-column>
            <el-table-column prop="userName" :label="$t('m.label.principal')"></el-table-column>
            <el-table-column prop="departmentName" :label="$t('m.label.operationalGroup')"></el-table-column>
            <el-table-column prop="productModelNumber" :label="$t('m.label.productModelNumber')">
                <template slot-scope="scope">
                    <el-link
                        :href="'#/productCenter/productBasicInfo?model='+ scope.row.productModelNumber"
                    >{{scope.row.productModelNumber}}</el-link>
                </template>
            </el-table-column>
            <el-table-column prop="asin" :label="$t('m.label.ASIN')">
                <template slot-scope="scope">
                    <el-link :href="'#/productCenter/productBasicInfo?asin='+ scope.row.asin">{{scope.row.asin}}</el-link>
                </template>
            </el-table-column>
        </el-table>
        <div style="overflow: auto;padding-top:15px">
            <pagination
                :length="total"
                :pagination="pagination"
                @currpage="requerstSearch"
                float="right"
            ></pagination>
        </div>
        <scrollTable ref="scrollTable"></scrollTable>
    </div>
</template>
<script>
import pagination from "components/pagination/pagination.vue";
import BU from "components/searchfor/bu.vue";
import category from "components/searchfor/category.vue";
import product from "components/searchfor/product.vue";
import ASIN from "components/searchfor/ASIN.vue";
import download from "components/xlsx/xlsx.vue";
import scrollTable from "components/scroll/scroll-table.vue";
const ERR_OK = 200;
export default {
    name: "totalData",
    components: {
        BU,
        category,
        product,
        ASIN,
        pagination,
        download,
        scrollTable
    },
    data() {
        return {
            pagination: {
                pagesize: 20,
                currpage: 1
            },
            total: 0,
            loading: true,
            tableHeadCountry: [],
            disabled: true,
            searchInfo: {
                businessUnitId: "",
                operationGroup: "",
                userChargeName: "",
                productCategory: "",
                productModelNumber: "",
                asinId: ""
            },
            productModelNumber: [],
            userChargeList: [],
            BUList: [],
            operationGroupList: [],
            userList: [],
            productCategoryList: [],
            productList: [],
            asinList: [],
            countryList: [], //表头过滤数据
            columns: [],
            userAllList: []
        };
    },
    created() {
        this.init();
    },
    mounted() {
        this.columns = JSON.parse(JSON.stringify(this.$refs.table.columns));
        this.$refs.scrollTable.scrollShow(this.$refs.table);
    },
    methods: {
        init() {
            this.clearSearchInfo();
            this.requerstSearch();
            this.initCountryList();
        },
        getCategory() {
            this.$refs.category.getCategory();
            this.$refs.product.getProduct();
            this.$refs.ASIN.getASIN();
            this.searchInfo.operationGroup = ''
            this.searchInfo.userChargeName = ''
            this.chooseBU();
        },
        getProduct() {
            this.$refs.product.getProduct();
            this.$refs.ASIN.getASIN();
        },
        getASIN(val) {
            this.productModelNumber = val;
            this.$refs.ASIN.getASIN();
        },
        getReverse() {},
        chooseBU() {
            //清空运营组
            this.disabled = false;
            var buId = this.searchInfo.businessUnitId;
            var url =
                this.GLOBAL.productService +
                "/productSubscription/findOperationGroupByBuId/" +
                buId;
            //var url =  this.GLOBAL.productService + "productSubscription/findOperationGroupByBuId/" + BuId
            this.$ajax
                .get(url, {})
                .then(res => {
                    if (res.data.code == "200") {
                        this.operationGroupList = [];
                        this.operationGroupList = res.data.data;
                    }
                })
                .then(error => {
                    console.log(error);
                });
        },
        chooseDept() {
            this.searchInfo.userChargeName = ''
            if (this.searchInfo.operationGroup) {
                var deptId = this.searchInfo.operationGroup;
                var url =
                    this.GLOBAL.productService +
                    "/productSubscription/findUserChargeByDeptId/" +
                    deptId;
                this.$ajax
                    .get(url, {})
                    .then(res => {
                        if (res.data.code == "200") {
                            this.userList = res.data.data;
                        }
                    })
                    .then(error => {
                        console.log(error);
                    });
            }
        },
        search() {
            this.pagination.currpage = 1;
            this.total = 0;
            this.requerstSearch();
        },
        formData() {
            let modelNumber = this.productModelNumber.find(
                item => item.productId === this.searchInfo.productModelNumber
            );
            return {
                businessUnitId: this.searchInfo.businessUnitId,
                operationGroup: this.searchInfo.operationGroup,
                userCharge: this.searchInfo.userChargeName,
                productCategory: this.searchInfo.productCategory,
                productModelNumber: modelNumber
                    ? modelNumber.productModelNumber
                    : "",
                asinId: this.searchInfo.asinId,
                countryIds: this.tableHeadCountry,
                pageNumber: this.pagination.currpage,
                pageSize: this.pagination.pagesize
            };
        },
        requerstSearch() {
            this.loading = true;
            this.$ajax({
                method: "post",
                url:
                    this.GLOBAL.productService +
                    "/productSubscription/findProductSubscriptionList",
                data: this.formData()
            })
                .then(res => {
                    if (res.data.code == "200") {
                        this.userChargeList = res.data.data.data;
                        this.total = res.data.data.total;
                    }
                    this.loading = false;
                })
                .catch(error => {});
        },
        clearSearchInfo() {
            this.searchInfo.businessUnitId = "";
            this.searchInfo.operationGroup = "";
            this.searchInfo.userChargeName = "";
            this.searchInfo.productCategory = "";
            this.searchInfo.productModelNumber = "";
            this.searchInfo.asinId = "";
        },
        initCountryList() {
            var url =
                this.GLOBAL.productService + "/findProductCharge/findCountry";
            // var url =  this.GLOBAL.productService +"/productCoded/findCountryList"
            this.$ajax
                .get(url, {})
                .then(res => {
                    if (res.data.code == "200") {
                        this.countryList = res.data.data;
                    }
                })
                .catch(error => {
                    console.log(error);
                });
        },
        //下载
        getDataxlsx() {
            let form = JSON.parse(JSON.stringify(this.formData()));
            delete form.pageNumber;
            delete form.pageSize;
            this.$ajax({
                method: "post",
                url:
                    this.GLOBAL.productService +
                    "/productSubscription/findProductSubscriptionList",
                data: form
            }).then(res => {
                if (res.data.code === ERR_OK) {
                    this.$refs.download.getDataXlsx(res.data.data.data);
                } else {
                    this.$refs.download.loadingClose();
                    this.$message.error(res.data.msg);
                }
            });
        },
        // 标题背景颜色
        getRowClass({ row, column, rowIndex, columnIndex }) {
            if (rowIndex === 0) {
                return "background: #EBEEF5 ";
            } else {
                return "";
            }
        }
    }
};
</script>

<style lang="stylus" scoped>
.el-form-item {
    display: inline-block;
    margin-bottom: 0;
}

.el-table {
    margin-top: 15px;

    .el-select {
        padding: 0;
    }
}
</style>
